<template>
    <div class="demo">
        <h2>📌 简单用法</h2>
        <p>
            <strong>预览</strong>
        </p>
        <div class="component-wrapper">
            <div class="component-wrapper-demo">
                <syxPagination :paginationfrom="paginationfrom"></syxPagination>
            </div>
            <div class="code-content" v-highlight style="height: 0;">
                <div class="code-content-height">
                    <pre><code class="html">{{codeStr}}</code></pre>
                </div>
            </div>
            <div class="lock-code" @click="showCode(0)" ref="xxx">
                <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from '../mixin'

    export default {
        mixins: [mixin],
        components: {
        },
        data() {
            return {
                paginationfrom:{
                    pageSize: 10,
                    pageNumber: 1,
                    total:100
                },
                codeStr: ` <syxPagination :paginationfrom="paginationfrom"></syxPagination>


 源代码展示:
 <div class="box_pagination" :style="{height:height}">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginationfrom.pageNumber"
            :page-size="paginationfrom.pageSize"
            :total="paginationfrom.total"
            :layout="layout"
            :page-sizes="sizes"
    >
    </el-pagination>
  </div>


   props: {
      /**
       * 高度
       */
      height: {
        type: String,
        default: () => "10%"
      },
      /**
       * 条数下拉
       */
      sizes: {
        type: Array,
        default: () => [10, 50, 100, 200]
      },
      /**
       * 条数下拉
       */
      layout: {
        type: String,
        default: () => 'total, sizes, prev, pager, next, jumper'
      },
      /**
       * 分页
       */
      paginationfrom: {
        type: Object,
        default: () => ({
          pageSize: 0,
          pageNumber: 0,
          total: 0
        })
      }
    },

     methods: {
      /**
       * 每页条数
       * @param val
       */
      handleSizeChange(val) {
        this.$emit("handleSizeChange", val);
      },
      /**
       * 当前页
       * @param val
       */
      handleCurrentChange(val) {
        this.$emit("handleCurrentChange", val);
      }
    }
        `
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
